<template>
  <view class="logo">
    <view class="logo-hd">
      <image src="/static/img/logo.png" mode="widthFix"></image>
      <view class="logo-hd-h1"> 医圈子医院 </view>
      <view class="logo-hd-h3"> 生命至上,医者仁心 </view>
    </view>
    <view class="logo-center">
      <uni-forms ref="form" :modelValue="form" :rules="rules">
        <uni-forms-item name="username">
          <uni-easyinput v-model="form.username" placeholder="请输入用户名" />
        </uni-forms-item>
        <uni-forms-item name="password">
          <uni-easyinput
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
          ></uni-easyinput>
        </uni-forms-item>
      </uni-forms>
      <view class="logo-center-nr">
        <radio-group @change="radioChange">
          <view class="">
            <radio value="1" /> 我已阅读并同意 <text>《隐私政策》</text>
          </view>
        </radio-group>
        <view class="zhuces" @click="$pub.go(zhuce_list)"> 注册 </view>
      </view>
    </view>
    <view class="logo-db">
      <view class="logo-db-dl" @click="getDelu"> 登录 </view>
    </view>
  </view>
</template>

<script>
import { setToken } from "@/utils/auth.js";

import { mapState, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {
      zhuce_list: "/pages/logo/zhuce/zhuce",
      form: {
        username: "ys1", //用户名
        password: "12345678", //密码
      },
      //注册
      forms: {
        ubirthday: "", //
        uloginname: "", //名字
        unickname: "",
        username: "", //用户名
        upassword: "", //密码
        usex: "",
        uweixin: "",
      },
      index: 1,
      ruless: {
        uloginname: {
          rules: [
            {
              required: true,
              errorMessage: "请输入登录名",
            },
          ],
          validateTrigger: "sunmit",
        },
        username: {
          rules: [
            {
              required: true,
              errorMessage: "请输入姓名",
            },
          ],
          validateTrigger: "sunmit",
        },
        upassword: {
          rules: [
            {
              required: true,
              errorMessage: "请输入密码",
            },
          ],
          validateTrigger: "sunmit",
        },
        unickname: {
          rules: [
            {
              required: true,
              errorMessage: "请输入昵称",
            },
          ],
          validateTrigger: "sunmit",
        },
        ubirthday: {
          rules: [
            {
              required: true,
              errorMessage: "请输入出生日期",
            },
          ],
          validateTrigger: "sunmit",
        },
        usex: {
          rules: [
            {
              required: true,
              errorMessage: "请输入性别",
            },
          ],
          validateTrigger: "sunmit",
        },
      },
      rules: {
        password: {
          rules: [
            {
              required: true,
              errorMessage: "请输入密码",
            },
          ],
          validateTrigger: "sunmit",
        },
        username: {
          rules: [
            {
              required: true,
              errorMessage: "请输入姓名",
            },
          ],
          validateTrigger: "sunmit",
        },
      },
      value: "",
    };
  },
  methods: {
    ...mapMutations("m_message", ["saveId"]),
    ...mapMutations("m_user", ["setUserInfo"]),
	/*  */
    radioChange(e) {
      this.value = e.detail.value;
    },
	/*  */
    async getDelu() {
      this.$refs.form.validate().then(async (res) => {
        if (this.value == 1) {
          try {
            let re = await this.$API.authApi.login(this.form);
            // 存token
            setToken(re.token);
			/* 认证  */
            this.auth();
            /* 获取用户信息 */
            this.setUser();
          } catch (e) {
            uni.showToast({
              icon: "error",
              title: e,
            });
          }
        } else {
          uni.showToast({
            icon: "error",
            title: "请阅读同意",
          });
        }
      });
    },
    async setUser() {
      let re = await this.$API.userApi.getUser();
      /* 保持用户信息 */
      this.setUserInfo(re);
    },
    async auth() {
		/*  */
      let res = await this.$API.doctorApi.doctorAuth();
      console.log("认证状态", res);
	  /* */
      let info = res;
      /* 保持认证状态 */
      uni.setStorageSync("authStatus", info.applyStatus);
      if (info == null) {
        uni.showToast({
          title: "未认证",
        });
        uni.reLaunch({
          url: "/pages/auth/auth",
        });
      } else {
        /* 保持id 医生聊天id 医生userid */
        this.saveId(info.userid);
        /* 初始socket */
        this.$ws.init();
		/*  */
		setTimeout(()=>{
			/* 跳转首页 */
			uni.reLaunch({
			  url: "/pages/index/index",
			});
		})
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep uni-radio-group {
  width: 80%;
}

.logo {
  padding: 322rpx 30rpx;

  .logo-hd {
    text-align: center;

    image {
      width: 100rpx;
    }

    .logo-hd-h1 {
      font-size: 40rpx;
      color: #000000;
      font-weight: 600;
      letter-spacing: 5rpx;
      line-height: 64rpx;
    }

    .logo-hd-h3 {
      font-size: 27rpx;
      letter-spacing: 5rpx;
      color: #666;
    }
  }

  ::v-deep .uni-forms-item {
    margin-bottom: 44rpx;
  }

  .logo-center {
    margin-top: 120rpx;

    ::v-deep .uni-easyinput__content-input {
      border-bottom: 1rpx solid #d8d8d8;
      font-size: 30rpx;
      height: 80rpx;
    }

    ::v-deep .is-input-border {
      border: 0;
    }

    .logo-center-nr {
      letter-spacing: 5rpx;
      font-size: 23rpx;
      display: flex;
      justify-content: space-between;
      color: #555;

      text {
        color: #0091ff;
      }

      .zhuces {
        color: #0091ff;
      }

      ::v-deep .uni-radio-input {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }

  .logo-db {
    margin-top: 112rpx;

    .logo-db-dl {
      background-color: #0091ff;
      color: #fff;
      line-height: 90rpx;
      text-align: center;
      border-radius: 48rpx;
    }
  }
}

.zhuces {
  display: flex;

  button {
    width: 46% !important;
  }
}

.loginContent {
  padding: 50rpx;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20upx;

    view {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 150rpx;
  }

  .box-tu image {
    width: 184rpx;
    height: 184rpx;
    border-radius: 50%;
    margin-bottom: 162rpx;
  }

  uni-button {
    font-size: $uni-font-size-lg;
    font-weight: 600;
    color: #fff;
  }

  uni-button[type="default"] {
    min-height: 90rpx;
    height: 90rpx;
    line-height: 90rpx;
    background-color: red;
    margin-top: 20rpx;
  }

  button {
    width: 100%;
  }

  .haoma {
    color: #666;
    font-size: 35rpx;
    margin-top: 50rpx;
  }

  .haoma2 {
    min-height: 45px;
    height: 45px;
    line-height: 45px;
    background-color: #7976e9;
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
  }

  .placeholder {
    color: #ccc;
  }
}

.password-login {
  padding: 30upx 0;

  .input-box {
    padding: 0 50upx;
    // border-bottom: 1upx solid #f0f0f0;
    margin-bottom: 50upx;

    input {
      // padding: 27upx 0;
      font-size: 40upx;
      color: #333;
      font-weight: bold;
      height: 100rpx !important;
    }
  }

  .zhucetiaoting {
    text-align: center;
    margin-bottom: 80upx;
    color: #7976e9;
    font-weight: 700;
  }

  .zhucea {
    margin-bottom: 20rpx;
  }
}

.zhuce {
  margin-top: 500rpx;
}

.uni-icons {
  margin-right: 10rpx;
}

.uni-input {
  height: 50 !important;
}
</style>